<template>
	<div id="orderDetailPage">
		<!--状态信息-->
		<div class="header">
			<div>
				<div class="statusPanle">
					<div class="status">{{orderDetail.orderStatus|orderStatus}}</div>
					<div class="status">{{orderDetail.otherStatus|otherStatus}}</div>
					<div v-if="orderDetail.orderStatus==4">
						<mu-raised-button @click="endorse" label="改签" class="status_btn" />
					</div>
					<div v-if="orderDetail.orderStatus==4">
						<mu-raised-button @click="refund" label="退票" class="status_btn" />
					</div>
					<div v-if="orderDetail.orderStatus==0||orderDetail.otherStatus=='waiting_for_process'">
						<mu-raised-button @click="pay(orderDetail)" label="去支付" class="status_btn" />
					</div>
					<div v-if="orderDetail.orderStatus==0">
						<mu-raised-button @click="cancel(orderDetail)" label="取消" class="status_btn cancel_btn" />
					</div>
				</div>
				<p class="tip"><span class="iconfont">&#xe62c;</span><span>请在{{orderDetail.payOverTime|overTime}}之前进行支付，避免耽误行程</span></p>
			</div>
			<div>
				<p class="money">
					<span class="currencyType">￥</span>
					<span class="count">{{orderDetail.sum + orderDetail.insuranceLine}}</span>
					<!--<span class="iconfont">&#xe600;</span>-->
				</p>
			</div>
		</div>
		<!--航班信息-->
		<div class="flight" v-for="flight in flights">
			<div class="main">
				<div class="city">
					<span>{{flight[0].fromCityCn}}</span>
					<span class="iconfont">&#xe6bd;</span>
					<span>{{flight[flight.length-1].toCityCn}}</span>
				</div>
				<div>
					<p class="handle" @click="baggage">
						<span>行李额</span>/<span>退改签</span>
					</p>
				</div>
			</div>
			<div class="detail">
				<p><span class="iconfont point top">&#xe613;</span></p>
				<p><span class="iconfont point bottom">&#xe613;</span></p>
				<div v-for="(seg,index) in flight" class="item">
					
					<div class="when">
						<p class="date">{{seg.deptDate|time}}</p>
						<p>{{seg.deptTime}}</p>						
						<p class="date">{{seg.arrDate|time}}</p>
						<p>{{seg.arrTime}}</p>
					</div>
					<div class="airport">
						<p class="city">{{seg.deptCity}}{{seg.deptTerminal}}</p>
						<!--经停-->
						<div v-for="stopOver in seg.stopoverinfo" class="transfer">
							<p>
								<span class="iconfont zhuan">&#xe60c;</span>
								<span class="transferCity">{{stopOver.stopAirport}}</span>
								<span class="transferTime" v-if="stopOver.stopTime">停留{{stopOver.stopTime}}</span>
							</p>
						</div>
						<p class="city">{{seg.arrCity}}{{seg.arrTerminal}}</p>
						<!--中转-->
						<div v-if="!(index==(flight.length-1))" class="transfer">
							<p>
								<span class="iconfont zhuan">&#xe606;</span>
								<span class="transferCity">{{seg.toCityCn}}</span>
								<span class="transferTime">停留{{stopTime(seg,index,flight)|duration}}</span>
							</p>
						</div>
					</div>
					<div class="airline">
						<p class="company">{{seg.airlineChn}}</p>
						<p>{{seg.airlineNumber}}</p>
						<p v-if="seg.shareFlightNo"><span class="realFlightNo">实际承运</span>{{seg.shareFlightNo}}</p>
						<p>{{seg.planeModel}}</p>
					</div>
				</div>
			</div>
		</div>
		<!--乘客信息-->
		<div class="passenger">			
			<div class="same single insurance" v-if="insurance">
				<div class="title">保险</div>
				<div class="content" @click="viewDetail">查看详情 <span class="iconfont"> &#xe600;</span></div>
			</div>
			<div class="same single">
				<div class="title">舱位</div>
				<div class="content">{{flights[0][0].cabin|cabin}}</div>
			</div>
			<div class="same multyply">
				<div class="title">乘机人</div>
				<div class="content" >
					<div v-for="(name,index) in orderDetail.passengerList">
						<p>{{name}}</p>
						<p v-if="orderDetail.ticketNoList[index]">票号: {{orderDetail.ticketNoList[index]}}</p>
					</div>
				</div>
			</div>
			<div class="same single">
				<div class="title">联系手机</div>
				<div class="content">{{orderDetail.mobile}}</div>
			</div>
			<div class="same multyply">
				<div class="title">报销凭证</div>
				<div class="content spec">
					<p>1.您可以在机场柜台直接打印机票行程单</p>
					<p>2.拨打南航客服电话：4689856获取机票行程单。</p>
				</div>
			</div>
		</div>
		<!--支付过程中的提示框-->
		<mu-dialog :open="paying" @close="paying = false">
			系统正在确认中，请稍后再试。				
		</mu-dialog>
		<!--退改签-->
		<mu-dialog :open="dialog" @close="close">
			<p style="text-align: center;font-size: 16px;color:black;">请拨打客服电话</p>
			<p style="text-align: center;font-size: 16px;color:black;">
				<b style="text-align: center;font-size: 16px;color:#099fde;">4001355500 </b> {{dialogText}}
			</p>
		</mu-dialog>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>